<template>
  <div class="box">
    <van-nav-bar title="CINV综合管理信息"
                 @click-left="$router.back(-1)">
      <template #left>
        <img class="icon_right"
             src="@/assets/img/down_left.png"
             alt="">
      </template>
    </van-nav-bar>
    <div class="title">
      <span class="i"></span>
      <span>CINV风险评估</span>
    </div>
    <!-- 评估 -->
    <AssessModule :cinvInfo="assessMap"></AssessModule>

    <div class="title">
      <span class="i"></span>
      <span>CINV用药处方</span>
    </div>
    <!-- 用药处方 -->
    <div class="prescription">
      <button class="add"
              @click="Addshow">新增</button>
      <button class="add"
              style="margin-left: 10px"
              @click="usePackage">使用套餐</button>
      <PrescriptionCard showDelIcon
                        @del="delIcon"
                        :prescriptionList="prescriptionList"></PrescriptionCard>
    </div>
    <!-- 提交按钮 -->
    <div class="bottom">
      <button class="btn_1"
              @click="submit(false)">暂不上传</button>
      <button class="btn_2"
              @click="submit(true)">确认提交</button>
    </div>
    <!-- 新建药方弹出层 -->
    <van-popup :closeable="closeable"
               v-model="show">
      <div class="info">
        <van-field label="药物类型"
                   label-width="5.5em"
                   @focus="fieldSelect"
                   @click="drugTypeShow = true"
                   v-model.trim="prescription_params.drug_type"
                   placeholder="请选择药物类型" />
        <van-field label="具体药物"
                   label-width="5.5em"
                   @focus="fieldSelect"
                   @click="drugListShowFun"
                   v-model.trim="prescription_params.drug_name"
                   placeholder="请选择具体药物" />
        <van-field label="给药途径"
                   label-width="5.5em"
                   v-model.trim="prescription_params.drug_way"
                   placeholder="请输入给药途径" />
        <van-field label="剂量及频率"
                   label-width="5.5em"
                   v-model.trim="prescription_params.frequency"
                   placeholder="请输入剂量及频率" />
      </div>
      <button class="ok"
              @click="addDrug">确定 </button>
    </van-popup>

    <!-- 药物类型弹出层 -->
    <van-popup v-model="drugTypeShow"
               round
               position="bottom">
      <van-picker title="药物类型"
                  show-toolbar
                  :columns="drugType_List.map(it=> it.antinausea_drug)"
                  @confirm="drugTypeConfirm"
                  @cancel="drugTypeShow = false" />
    </van-popup>

    <!-- 具体药物弹出层 -->
    <van-popup v-model="drugListShow"
               round
               position="bottom">
      <van-picker title="具体药物"
                  show-toolbar
                  :columns="drug_List.map(it=> it.drug_name)"
                  @confirm="drugListConfirm"
                  @cancel="drugListShow = false" />
    </van-popup>

    <!-- 选择套餐弹出层 -->
    <van-popup :closeable="closeable"
               v-model="packageShow">
      <div class="package-box">
        <!-- 顶部菜单 -->
        <div class="menu">
          <div>选择套餐</div>
          <button class="manage-btn"
                  @click="$router.push('/yihu/packageManage')">套餐管理</button>
        </div>
        <!-- 套餐列表 -->
        <div class="list">
          <div class="item"
               @click="pickPackage(it)"
               v-for="(it, ins) in packageList"
               :key="ins">
            <div>套餐名称：{{it.name}}</div>
            <div>药物数量：{{it.drug_num}}</div>
          </div>
          <div class="empty"
               v-if="packageList.length === 0">
            <img src="@/assets/home/empty.png"
                 alt="" />
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import AssessModule from '@/views/components/AssessModule'
import PrescriptionCard from '@/views/components/PrescriptionCard'
import { prescription, drugType, drugList, packageList } from '@/api/medical'
export default {
  components: { PrescriptionCard, AssessModule },
  data () {
    return {
      show: false,
      closeable: true,
      assessMap: { risk: '' }, // 风险评估数据
      prescription_params: {
        id: '',
        drug_type: '', // 类型
        type_id: '',
        drug_name: '', // 阿司匹林
        drug_way: '', // 口服
        frequency: '' // 3次/日
        // state: '-1' // 1 提交：1 暂不提交：-1
      },
      prescriptionList: [], // 药方list
      drugTypeShow: false, // 药物类型popup
      drugType_List: [], // 药物类型
      drugListShow: false,
      drug_List: [], // 药物列表
      isAdd: false, // 是否新增了药方
      packageShow: false, // 选择套餐弹出层
      packageList: [] // 套餐列表
    }
  },
  mounted () {
    this.assessMap = this.$route.query
    if (this.$route.query.cinv_prescription) {
      // 不是回显的时候字段是null 存在即可回显
      this.prescriptionList = JSON.parse(this.$route.query.cinv_prescription)
    }
  },
  methods: {
    // 点击套餐-使用
    pickPackage (item) {
      const _a = JSON.parse(item.drug_json)
      this.prescriptionList.push(..._a)
      this.packageShow = false
      this.$toast.success('套餐使用成功')
    },
    // 使用套餐按钮
    async usePackage () {
      this.packageShow = true
      const { code, msg, data } = await packageList()
      if (code !== 1) return this.$toast.fail(msg)
      this.packageList = data
    },
    // 删除药方
    async delIcon (ins) {
      this.prescriptionList.splice(ins, 1)
    },
    // 选择药物弹出
    drugListShowFun () {
      if (this.drug_List.length === 0) return this.$toast.fail('请先选择药物类型或此药物列表为空')
      this.drugListShow = true
    },
    // 取消弹出键盘事件
    fieldSelect () {
      document.activeElement.blur()
    },
    // 获取药物类型
    async drugType () {
      const { data, code, msg } = await drugType()
      if (code !== 1) return this.$toast.fail(msg)
      this.drugType_List = data
    },
    // 确认药物类型选择
    drugTypeConfirm (e, index) {
      this.prescription_params.drug_type = e
      this.prescription_params.type_id = this.drugType_List[index].id
      this.drugTypeShow = false
      this.drugList()
    },
    // 根据 type_id 获取药物列表
    async drugList () {
      const type_id = this.prescription_params.type_id
      const { data, msg, code } = await drugList({ type_id })
      if (code !== 1) return this.$toast.fail(msg)
      this.drug_List = data
    },
    // 确认药物列表选择
    drugListConfirm (e) {
      this.prescription_params.drug_name = e
      this.drugListShow = false
    },
    // 添加处方
    addDrug () {
      if (!this.prescription_params.drug_type) return this.$toast.fail('类型不能为空')
      if (!this.prescription_params.drug_name) return this.$toast.fail('药物名称不能为空')
      if (!this.prescription_params.drug_way) return this.$toast.fail('给药途径不能为空')
      if (!this.prescription_params.frequency) return this.$toast.fail('剂量及频率不能为空')
      this.show = false
      // this.isAdd = true //! 由于和接口逻辑出现问题 需要只有点击了新增的时候 才传递值 所以加变量主要用来控制回显的时候列表里的数据不传
      this.prescriptionList.push(this.prescription_params)
    },
    // 暂不上传 | 确认提交
    async submit (flag) {
      if (flag && this.prescriptionList.length === 0) return this.$toast.fail('未添加药方')
      const _p = {
        state: '',
        id: '',
        drug_json: ''
      }
      _p.state = flag ? '1' : '-1'
      _p.id = this.$route.query.id
      _p.drug_json = JSON.stringify(this.prescriptionList)
      const { code, msg } = await prescription(_p)
      if (code !== 1) return this.$toast.fail(msg)
      this.$toast.success('提交成功')
      this.$router.push('/home_')
    },
    Addshow () {
      this.show = true
      // 清空弹框内的数据
      this.prescription_params = {}
      this.drugType() // 动态获取药物类型
    }
  }
}
</script>
<style scoped lang='less'>
// 选择套餐弹出层
.package-box {
  width: 100%;
  height: 500px;
  padding: 20px 10px;
  box-sizing: border-box;
  // background-color: red;
  .menu {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    padding-left: 5px;
    .manage-btn {
      margin-left: 10px;
      padding: 0px 15px;
      height: 30px;
      background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
      border: none;
      font-size: 12px;
      color: #ffffff;
      letter-spacing: 1px;
      border-radius: 8px;
    }
  }
  .list {
    font-size: 12px;
    padding-top: 15px;
    .empty {
      margin-top: 80px;
    }
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 15px;
      box-sizing: border-box;
      border-radius: 10px;
      margin-top: 10px;
      border: 1px solid #3eb3ff;
      width: 100%;
    }
  }
}

/deep/.van-cell {
  line-height: 32px;
}
/deep/.van-cell__title {
  width: 70px;
  font-weight: 600;
}
/deep/.van-field__control {
  background-color: #eeeeee;
  padding-left: 10px;
  font-size: 14px;
  color: #a0a0a0;
  opacity: 0.8;
}
/deep/ .van-popup--bottom {
  width: 100% !important;
}
/deep/.van-popup {
  width: 80%;
  //  height: 358px;
  background: #ffffff;
  border-radius: 8px;
  text-align: center;
  .info {
    width: 100%;
    padding: 5px 25px 5px 10px;
    box-sizing: border-box;
    margin-top: 30px;
    border-bottom: 1px solid #eeeeee;
  }
  .ok {
    width: 30%;
    height: 32px;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    border: none;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 1px;
    border-radius: 16px;
    margin: 18px auto;
  }
}
.title {
  width: 100%;
  margin-top: 40px;
  .i {
    display: inline-block;
    margin-right: 5px;
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    opacity: 1;
  }
  span {
    display: inline-block;
    height: 22px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: #4182ff;
    opacity: 1;
  }
}
.icon_right {
  width: 12px;
  height: 21px;
  vertical-align: middle;
}
.box {
  width: 100%;
  padding: 10px 16px;
  box-sizing: border-box;

  // 用药处方
  .prescription {
    width: 100%;
    margin-bottom: 25px;
    .add {
      width: 96px;
      height: 32px;
      background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
      border: none;
      font-size: 14px;
      color: #ffffff;
      letter-spacing: 1px;
      margin-bottom: 15px;
      border-radius: 8px;
    }
  }
  .bottom {
    width: 100%;
    height: 50px;
    text-align: center;
    button {
      width: 30%;
      height: 32px;
      border: 1px solid #4f4f4f;
      border-radius: 16px;
      font-size: 14px;
      font-family: PingFang SC;
      letter-spacing: 1px;
      color: #161616;
      border: none;
    }
    .btn_2 {
      color: #ffffff;
      background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
      margin-left: 30px;
    }
  }
}
</style>
